<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container">
        <div class="lead mt-4 mb-4">
          购物车&nbsp;&nbsp;<el-icon :size="30" style="vertical-align: top"
            ><ShoppingCartFull
          /></el-icon>
        </div>
        <el-table
          ref="multipleTableRef"
          :data="cartList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column property="img" label="图片" width="150">
            <template #default="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.img" />
            </template>
          </el-table-column>
          <el-table-column property="name" label="名称" width="300" />
          <el-table-column property="price" label="价格" width="120" />
          <el-table-column property="store" label="库存" width="120" />
          <!-- <el-table-column property="size" label="尺寸" width="120" /> -->
          <el-table-column property="" label="数量" width="" align="center">
            <template #default="scope">
              <el-input-number
                :step="1"
                :min="1"
                @change="isChangeWantNum"
                v-model="scope.row.wantNum"
                :max="parseInt(scope.row.store)"
                step-strictly
              />
            </template>
          </el-table-column>
          <el-table-column property="" label="操作" width="" align="center">
            <template #default="scope">
              <el-button @click="deleteCake(scope.row)" type="danger" link
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="count-box text-danger">
          <el-button
            @click="goToOrder"
            type="danger"
            style="width: 200px; height: 50px; font-size: 20px"
          >
            结算：￥{{ allMoney }}</el-button
          >
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, defineEmits } from "vue";
import { ShoppingCartFull } from "@element-plus/icons-vue";
import { ElTable } from "element-plus";
import { useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import router from "../../router";
import request from "../../api/request";
import { useCounterStore } from "../../store/cart";
import { useUserCounterStore } from "../../store/oneselfInfo";
import { storeToRefs } from "pinia";
const multipleTableRef = ref([]);
const store = useCounterStore();
const store2 = useUserCounterStore();

const { cartList } = storeToRefs(store);

onMounted(() => {
  cartList.value.forEach((item) => {
    item.wantNum = item.wantNum ? item.wantNum : 1;
    multipleTableRef.value.toggleRowSelection(item, true);
  });
});
const allMoney = ref(0);
const isSelectCakeList = ref([]);
const isChangeWantNum = () => {
  let countMoney = 0;
  isSelectCakeList.value.forEach((item) => {
    countMoney = countMoney + parseInt(item.price) * item.wantNum;
  });
  allMoney.value = countMoney;
};
const handleSelectionChange = (arr) => {
  isSelectCakeList.value = arr;
  let countMoney = 0;
  arr.forEach((item) => {
    countMoney = countMoney + parseInt(item.price) * item.wantNum;
  });
  allMoney.value = countMoney;
};
const deleteCake = (cake) => {
  store.removeCake(cake);
};
const onesInfo = ref({});
const goToOrder = () => {
  onesInfo.value = store2.getInfo();
  if (onesInfo.value.id == null) {
    ElMessage({
      type: "error",
      message: "先登录",
    });
    let params = "cart";
    router.push("/login?params="+ params);
    return false;
  }
  let ids = [];
  cartList.value.forEach((item) => {
    ids.push(item.id);
  });
  let params = {
    userId: onesInfo.value.id,
    cakeId: ids.toString(),
    totalMoney: allMoney.value,
  };
  request.post("/order/add", params).then((res) => {
    if (res.code == 200) {
      router.push("/order");
    }
  });
};
</script>
<style scoped lang="scss">
.count-box {
  text-align: end;
  padding: 30px;
}
</style>
